<template>
  <div class="organizationInfo">
    <div class="title">机构信息</div>
    <div class="line"></div>
    <div class="orgInfos" v-if="!isValid">
      <div class="orgInfo">
        <div>
          <p>
            机构名称：<span style="margin-left: 75px">{{ orgInfo.name }}</span>
          </p>
          <p>
            负责人姓名：<span style="margin-left: 60px">{{
              orgInfo.major
            }}</span>
          </p>
        </div>
        <div>
          <p class="logo">机构logo：<img :src="orgInfo.logo" alt="" /></p>
        </div>
      </div>
      <p>
        负责人联系方式：<span style="margin-left: 32px">{{
          orgInfo.major_phone
        }}</span>
      </p>
      <p>
        邮箱：<span style="margin-left: 100px">{{ orgInfo.email }}</span>
      </p>
      <p class="info">
        <span style="width: 72px">机构简介：</span>
        <el-input
          rows="7"
          style="width: 450px"
          type="textarea"
          v-model="orgInfo.info"
        ></el-input>
      </p>
      <p class="prove">
        资质证明：<img :src="orgInfo.prove" alt="" style="margin-left: 73px" />
      </p>
    </div>
    <div class="orgInfos" v-else>
      <div class="orgInfo">
        <div>
          <p>
            机构名称：<span
              ><input
                type="text"
                v-model="orgInfo.name"
                style="margin-left: 75px"
            /></span>
          </p>
          <p>
            负责人姓名：<span
              ><input
                type="text"
                v-model="orgInfo.major"
                style="margin-left: 60px"
            /></span>
          </p>
        </div>
        <div>
          <!-- <p class="logo">机构logo：<img :src="orgInfo.logo" alt=""></p> -->
          机构logo：
          <el-upload
            class="avatar-uploader"
            style="margin: -18px 0 0 100px"
            :action="actionFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <!-- <img  :src="orgInfo.logo" class="avatar" /> -->
            <p class="logo" v-if="orgInfo.logo">
              <img :src="orgInfo.logo" alt="" />
            </p>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <p>
        负责人联系方式：<span
          ><input
            type="number"
            v-model="orgInfo.major_phone"
            style="margin-left: 32px"
        /></span>
      </p>
      <p>
        邮箱：<span
          ><input
            type="email"
            v-model="orgInfo.email"
            style="margin-left: 100px"
        /></span>
      </p>
      <p class="info">
        <span style="width: 72px">机构简介：</span>
        <el-input
          size="medium"
          rows="7"
          style="width: 450px"
          type="textarea"
          v-model="orgInfo.info"
        ></el-input>
      </p>
      <!-- <p class="prove">资质证明：<img :src="orgInfo.prove" alt=""></p> -->
      资质证明：
      <el-upload
        style="margin: -18px 0 0 136px"
        class="avatar-uploader prove"
        :action="actionFile"
        :show-file-list="false"
        :on-success="proveSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <p v-if="orgInfo.prove" class="prove">
          <img :src="orgInfo.prove" alt="" />
        </p>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div class="line" style="margin-left: 70px"></div>
    <div style="text-align: center; margin-top: 64px">
      <el-button type="success" @click="changeClubInfo">提交</el-button>
      <el-button type="info" @click="goBack">返回</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orgInfo: "",
    };
  },
  computed: {
    isValid() {
      return (
        sessionStorage.getItem("user_type") == 2 ||
        sessionStorage.getItem("user_type") == 5
      );
    },
    actionFile() {
      return `${this.$axios.defaults.baseURL}/event/file`;
    },
  },
  created() {
    this.getClubInfo();
  },
  methods: {
    proveSuccess(res, file) {
      this.orgInfo.prove = res.data;
    },
    handleAvatarSuccess(res, file) {
      this.orgInfo.logo = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!/^image\/(jpeg|png|jpg|bmp|gif|jpg)$/.test(isJPG)) {
        this.$message.error("上传头像图片格式不正确!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    getClubInfo() {
      let data;
      if (this.$route.query.organizationId != null) {
        data = {
          id: this.$route.query.organizationId,
        };
        this.$axios
          .post("/UserManage/club_info", data, {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          })
          .then((res) => {
            if (res.data.code == 2000) {
              this.orgInfo = res.data.data;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        data = {
          user_id: sessionStorage.getItem("user_id"),
        };
        this.$axios
          .post("/UserManage/club_infos", data, {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          })
          .then((res) => {
            if (res.data.code == 2000) {
              this.orgInfo = res.data.data;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    changeClubInfo() {
      let data;
      if (this.$route.query.organizationId != "") {
        data = {
          id: this.$route.query.organizationId,
          name: this.orgInfo.name,
          major: this.orgInfo.major,
          logo: this.orgInfo.logo,
          major_phone: this.orgInfo.major_phone,
          email: this.orgInfo.email,
          info: this.orgInfo.info,
          prove: this.orgInfo.prove,
        };
        this.$axios
          .post("/UserManage/club_info_edit", data, {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          })
          .then((res) => {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        data = {
          user_id: sessionStorage.getItem("user_id"),
          name: this.orgInfo.name,
          major: this.orgInfo.major,
          logo: this.orgInfo.logo,
          major_phone: this.orgInfo.major_phone,
          email: this.orgInfo.email,
          info: this.orgInfo.info,
          prove: this.orgInfo.prove,
        };
        this.$axios
          .post("/UserManage/club_info_edits", data, {
            headers: {
              token: window.sessionStorage.getItem("token"),
            },
          })
          .then((res) => {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.organizationInfo {
  padding-bottom: 200px;
}
.avatar-uploader {
  img {
    display: inline-block;
    border: 1px #ccc solid;
    padding: 10px;
    border-radius: 4px;
  }
}
.prove {
  display: flex;
  img {
    display: inline-block;
    width: 390px;
    border: 1px #ccc solid;
    padding: 20px 30px;
    border-radius: 4px;
  }
}
.info {
  display: flex;
  /*justify-content: space-between;*/
  span {
    margin-right: 70px;
  }
  textarea {
    height: 100%;
  }
}
.orgInfos input {
  border: none;
  outline: none;
}
.orgInfos .logo {
  display: flex;
  margin-bottom: 0;
  img {
    display: inline-block;
    width: 88px;
    height: 88px;
    border: 1px #ccc solid;
    padding: 10px;
    border-radius: 4px;
  }
}
.el-textarea textarea.el-textarea__inner {
  width: 414px !important;
}
.title {
  margin-left: 26px;
  margin-bottom: 12px;
  margin-top: 12px;
  font-weight: bold;
}

.line {
  width: 80%;
  border-top: 1px #dcdfe6 dotted;
}

.orgInfos {
  margin-top: 31px;
  margin-left: 70px;
  width: 50%;
  p {
    margin-bottom: 34px;
  }
  .orgInfo {
    display: flex;
    justify-content: space-between;
  }
}
</style>
